/*
 * React-Bootstrap Documentation
 * Special styles for presenting react-bootstrap's documentation and code examples.
 * Based on the Bootstrap Documentation styles and overridden as necessary.
 */

.docs-n3{
  width: 350px;
}
.docs-title{
  font-size: 40px;
  font-weight: bold;
}

.docs-center{
 text-align: center;
 color:#555;
}

.bs-docs-section h1 {
  font-size: 42px
}
.bs-docs-header .small{
  font-size: 18px;
  color:#fff;
  font-style: italic;
}
.author{
  font-size: 14px;
  margin: 0px 20px;
}
iframe{
  min-height: 440px !important;
}

.bs-docs-nav .navbar-nav > li > a {
  color: #333;
}
.bs-docs-footer {
  padding-top: 20px;
  text-align: left!important;
}
.bs-docs-nav .navbar-collapse {
  overflow: hidden;
}
.bs-docs-nav.freeze{
  position: relative!important;
  background: #fff!important;
}

.bs-docs-header p {
  font-weight: lighter;
}


.bs-docs-header a {
  color: #41cac0;
  font-weight: normal;
}
.btn-outline-inverse {
  border-color: white;
  transition: color .15s ease;
}
.bs-docs-header a:hover,
.btn-outline-inverse:hover, .btn-outline-inverse:focus, .btn-outline-inverse:active,
.bs-docs-nav .navbar-brand {
  color: #009190;
}

.bs-docs-masthead, .bs-docs-header {
  filter: none;
  color: #e9e9e9;
}

.bs-docs-masthead {
  margin-bottom: 20px;
}

.bs-docs-header h1 {
  color: #ffffff;
}

.bs-docs-header p {
}

a.back-to-top {
  font-size: 13px;
  margin-top: 0;
}

.bs-docs-sidebar .nav>li>a {
  color: #767676;
  font-size: 14px;
}

.bs-docs-sidebar .nav>li>a:hover, .bs-docs-sidebar .nav>li>a:focus {
  color: #009190;
  border-left: 1px solid #009190;
}

.back-to-top:hover {
  color: #009190;
}


.CodeMirror, .CodeMirror-scroll {
  height: auto;
}

.bs-example .btn-toolbar + .btn-toolbar {
  margin-top: 10px;
}

.bs-example .static-modal .modal {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  bottom: auto;
  z-index: 1;
  display: block;
}

.bs-docs-booticon {
  background-size: contain;
  border: 0;
  width: 200px;
  height: 200px;
}

.bs-example-popover-contained {
  height: 200px;
}

.bs-example-popover-contained > div {
  position: relative;
}

.bs-example-popover-scroll {
  overflow: scroll;
  height: 200px;
}

.bs-example-popover-scroll > div {
  position: relative;
  padding: 100px 0;
}

.playground {
  margin-bottom: 36px;
}

.bs-example {
  margin-bottom: 0;
}

.bs-example + .highlight {
  margin-top: 0;
  margin-bottom: 0;
  border-top: none;
  border-bottom-right-radius: 0;
}

.code-toggle {
  float: right;
  display: inline-block;
  position: relative;
  top: -1px;
  background: #fafafa;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border: 1px solid #e1e1e8;
  border-top: none;
  padding: 4px 8px;
}

@media (min-width: 768px) {
  .code-toggle {
    background: #fff;
  }
}

.code-toggle.open {
  background: #f8f5ec;
}

/* Minimal CSS Needed for contained modals */
.modal-container {
  position: relative;
}
.modal-container .modal, .modal-container .modal-backdrop {
  position: absolute;
}

.prop-table {
  background-color: white;
}

.bs-example.tooltip-static .tooltip {
  position: relative;
  display: inline-block;
  margin: 5px 10px;

}

.bs-example .super-colors {
  background: -moz-linear-gradient( top ,
      rgba(255, 0, 0, 1) 0%,
      rgba(255, 255, 0, 1) 15%,
      rgba(0, 255, 0, 1) 30%,
      rgba(0, 255, 255, 1) 50%,
      rgba(0, 0, 255, 1) 65%,
      rgba(255, 0, 255, 1) 80%,
      rgba(255, 0, 0, 1) 100%);
  background: -webkit-gradient(linear,  left top,  left bottom,
      color-stop(0%, rgba(255, 0, 0, 1)),
      color-stop(15%, rgba(255, 255, 0, 1)),
      color-stop(30%, rgba(0, 255, 0, 1)),
      color-stop(50%, rgba(0, 255, 255, 1)),
      color-stop(65%, rgba(0, 0, 255, 1)),
      color-stop(80%, rgba(255, 0, 255, 1)),
      color-stop(100%, rgba(255, 0, 0, 1)));
}

/*.bs-example .custom-menu > ul > li {
    padding: 0 20px;
}*/

.anchor,
.anchor:hover,
.anchor:active,
.anchor:focus {
  color: black;
  text-decoration: none;
  position: relative;
}
.anchor-icon {
  font-size: 90%;
  padding-top: 0.1em;
  position: absolute;
  left: -0.8em;
  opacity: 0;
}

h1:hover .anchor-icon,
h1 a:focus .anchor-icon,
h2:hover .anchor-icon,
h2 a:focus .anchor-icon,
h3:hover .anchor-icon,
h3 a:focus .anchor-icon,
h4:hover .anchor-icon,
h4 a:focus .anchor-icon {
  opacity: 0.5;
}

.prop-desc pre {
  border-radius: 0;
  border-width: 0;
  border-left-width: 3px;
}

.prop-desc-heading {
  margin-bottom: 10px;
}

.bs-callout {
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
}
.bs-callout h4 {
    margin-top: 0;
    margin-bottom: 5px;
}
.bs-callout p:last-child {
    margin-bottom: 0;
}
.bs-callout code {
    border-radius: 3px;
}
.bs-callout+.bs-callout {
    margin-top: -5px;
}
.bs-callout-default {
    border-left-color: #777;
}
.bs-callout-default h4 {
    color: #777;
}
.bs-callout-primary {
    border-left-color: #428bca;
}
.bs-callout-primary h4 {
    color: #428bca;
}
.bs-callout-success {
    border-left-color: #009190;
}
.bs-callout-success h4 {
    color: #009190;
}
.bs-callout-danger {
    border-left-color: #d9534f;
}
.bs-callout-danger h4 {
    color: #d9534f;
}
.bs-callout-warning {
    border-left-color: #f0ad4e;
}
.bs-callout-warning h4 {
    color: #f0ad4e;
}
.bs-callout-info {
    border-left-color: #5bc0de;
}
.bs-callout-info h4 {
    color: #5bc0de;
}

.intro{
  width: 100%;
  height: 300px;
  padding: 0px 10%;
}
.intro.intro1{
  background-color:#fff;
  position: relative;
  padding-top: 50px;
}
.intro.intro1 ul{
  height: 100%;
  width: 300px;
  display: inline-block;
  vertical-align: middle;
}
.intro.intro1 .add{
  display: inline-block;
  font-size: 60px;
  position: absolute;
  left: 50%;
  top: 100px;
  margin-left: -60px;
}
.intro.intro1 .right-intro{
  display: inline-block;
  width: 300px;
  float: right;
}

.intro.intro1 .right-intro img{
  width: 150px;
  margin:20px 0px 10px;
}


.intro.intro1 li{
  width: 100%;
  display: inline-block;
  line-height: 50px;
  font-size: 20px;
  color:rgba(51, 51, 51, 0.82);
}
.intro.intro1 li i{
  margin-right: 20px;
  color:#ff6c60;
}

.intro.intro2{
  padding: 40px 10%;
  height: 520px;
}

.intro.intro3{
  background-color:#fff;
  padding-top: 20px;
}
.intro.intro3 .use{
  font-size: 18px;
  margin: 20px 0px;
}
.intro.intro3 .use-list a {
  margin-right: 20px;
}
.intro.intro3 .use-list a img{
  width:80px;
}
.n3-nav .link{
  display: inline-block;
  width:100%;
  height:100%:
}